<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 500px;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>
<script src="./echarts.min.js"></script>
<script>
    let box = document.querySelector(".box")
    let myecharts = echarts.init(box)

    let option = {
        tooltip: {},
        xAxis: [
            {
                data: [1, 5, 10, 15, 20, 30],

            }, {}
        ],
    
        yAxis: [
            {
                min: 0,
                max: 50,

            }, {
                splitLine: {
                    show: false
                },
                min: 0,
                max: 30
            }
        ],
        legend: {
            left: "left"
        },
        series: [
            {
                type: "line",
                data: [10, 8, 30, 2, 15, 16],
                yAxisIndex: 0,

            },
            {
                type: "bar",
                data: [5, 14, 46, 18, 12, 9],
                yAxisIndex: 1,

            },
            {
                type: "pie",
                data: [
                    { value: 5, name: '早饭' },
                    { value: 8, name: '零食' },
                    { value: 9, name: '午饭' },
                    { value: 6, name: '晚饭' },
                    { value: 2, name: '矿泉水' },
                ],
                radius: '30%',
                center: [600, 120],
            },
            {
                type: "scatter",
                data: [8, 6, 7, 6, 18, 20]
            },
        ]
    }

    myecharts.setOption(option)
</script>